html, body {margin:0; padding:0; height: 100%;}
a, a:hover {cursor: pointer}

.p-5 {padding: 5px;}
.pl-5, .pv-5 {padding-left: 5px;}
.pr-5, .pv-5 {padding-right: 5px}
.pt-5, .ph-5 {padding-top: 5px;}
.pb-5, .ph-5 {padding-bottom: 5px;}
.p10, .p-10 {padding: 10px;}
.pl-10, .pv-10 {padding-left: 10px;}
.pr-10, .pv-10 {padding-right: 10px}
.pt-10, .ph-10 {padding-top: 10px;}
.pb-10, .ph-10 {padding-bottom: 10px;}
.p-15 {padding: 15px;}
.pl-15, .pv-15 {padding-left: 15px;}
.pr-15, .pv-15 {padding-right: 15px}
.pt-15, .ph-15 {padding-top: 15px;}
.pb-15, .ph-15 {padding-bottom: 15px;}
.p-20 {padding: 20px;}
.pl-20, .pv-20 {padding-left: 20px;}
.pr-20, .pv-20 {padding-right: 20px}
.pt-20, .ph-20 {padding-top: 20px;}
.pb-20, .ph-20 {padding-bottom: 20px;}
.m-5 {margin: 5px;}
.ml-5, .mv-5 {margin-left: 5px;}
.mr-5, .mv-5 {margin-right: 5px;}
.mt-5, .mh-5 {margin-top: 5px;}
.mb-5, .mh-5 {margin-bottom: 5px;}
.m-10 {margin: 10px;}
.ml-10, .mv-10 {margin-left: 10px;}
.mr-10, .mv-10 {margin-right: 10px;}
.mt-10, .mh-10 {margin-top: 10px;}
.mb-10, .mh-10 {margin-bottom: 10px;}
.m-20 {margin: 20px;}
.ml-20, .mv-20 {margin-left: 20px;}
.mr-20, .mv-20 {margin-right: 20px;}
.mt-20, .mh-20 {margin-top: 20px;}
.mb-20, .mh-20 {margin-bottom: 20px;}
.space {display: inline-block}
.bordered {border: 0 solid #666}
.bordered.all, .bordered.top {border-top-width: 1px}
.bordered.all, .bordered.right {border-right-width: 1px}
.bordered.all, .bordered.bottom {border-bottom-width: 1px}
.bordered.all, .bordered.left {border-left-width: 1px}
.bordered.dashed {border-style: dashed}

.srf-root, .sri-root, .invocation-panel {
    padding:0; border:1px solid #666;list-style: none; font-family: monospace; width: 275px; height: fit-content; cursor: default;
}
.sri-root {position: absolute; margin:0; z-index: 889}
.srf-root {margin: 0 20px 20px 0; padding: 0 10px 10px 10px;}
.srf-root:hover, .sri-root, .invocation-panel, .about-root,
.dialog-background.with-shadow,
.dialog-root.with-shadow, #result-panel {box-shadow: 2px 2px 10px #088;}
.srf-root>li {margin:0; padding:0; list-style: none;border-top: 1px solid #666}
.srf-root>li:first-child {border-top:none;border-bottom: 1px solid #666;padding:0 0 10px 0;}
.srf-title, .sri-title {font-size: 16px; line-height: 180%; padding: 10px;text-align: center}
.srf-title-meta {font-size: 12px; padding: 0 10px; text-align: center}
.srf-title-desc {margin-top: 20px; font-size: smaller; padding: 0 10px;}
/*.srf-dlg-desc {border-bottom: 1px solid #666;}*/

.sri {font-size: 14px; margin:0; padding:0; list-style: none;}
.sri>li {display: inline-block;padding:10px 0; text-align: left;}
.sri>li:first-child {padding-left: 5px;}
.sri>li:last-child {float: right; text-align: right;}

.sri-type {text-align: center; font-style: italic; font-size: 12px;}
.sri-ref td {vertical-align: top; padding: 10px;}
.sri-items {border-collapse: collapse}
.sri-items td {padding: 8px 5px}
.return-type {text-align: right;}
.method-name {text-align: left;}

.invocation-panel {position: absolute; padding: 20px; z-index: 900; text-align: left}
.close-button {display: inline-block; float: right}

.mask {position: fixed; background-color: #333; opacity: .65; z-index: 888; left:0; top: 0}
#game-panel {position: fixed; z-index: 999; display: none; border:1px solid #666;}
/*.button-panel {position: relative; left: 0; top: 0;}*/
canvas {cursor: none; border: 1px solid #666}
#panel {position: absolute; border:1px solid #ccc; padding: 15px; margin: 0 5px;}
.button {display: block; padding: 10px; text-align: center; margin-top:5px;}
#game-panel td {padding: 10px;}
#menu-bar {border-bottom: 1px solid #666; display: flex; padding: 15px; color: #aaa; align-items: center;justify-content: space-between;}
#menu-bar h1 small { font-size: 14px;}
#root-panel {display: flex; flex-wrap: wrap; padding: 20px/*; overflow: auto*/}

.ns-finder {padding: 8px; min-width: 300px; outline: none; border: 1px solid #555; font-size: large;}
.split-10 {display: inline-block; width: 10px;}
#logger {position: fixed; right: 0; bottom: 0; width: 50%; height: 25%; }
.operation-area {display: flex;}
.operation-area a.btn {display: flex; align-items: center;}

.about-panel, .dialog-background {
    z-index: 900; width: 100%; background-color: #2b2b2bcc; display: none;
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
}
.about-root {
    display: flex;
    width: fit-content;
    margin: 240px auto;
    padding: 20px;
    border: 3px solid #3b3b3b;
    align-items: flex-start;
}
.about-root img { margin-right: 20px; }
.about-cai { font-size: x-large; font-family: monospace}
.about-info div { line-height: 200%; }
.dw-info { font-style: italic; }
.dw-info a { color: #aaa; font-weight: bold}

.invisible { display: none }

/*
.dialog-root, .floating-panel {
    border: 3px solid #3b3b3b;
    position: fixed; padding: 0; left: 0; top: 0; display: none; font-family: 'Source Code Pro', monospace;
}
*/
.clickable {cursor: pointer}
.dialog-root.with-shadow, #result-panel {z-index: 999;}
.dialog-header, .srf-dlg-desc {border-bottom-width: 1px; border-bottom-style: solid;}
.dialog-root {
    width: fit-content;
    margin: 120px auto 0 auto;
    /*padding: 20px;*/
    border: 3px solid #3b3b3b;
    align-items: flex-start;
    max-width: 75%; max-height: 700px;
    min-width: 15%;
    font-family: 'Source Code Pro', monospace;
}
.dialog-foot {display: flex; justify-content: right; border-top: 1px solid #666;}
.flexable/*, .auto-grow*/ { display: flex }
.half-width {width: 50%}
.full-width, .fit-parent {width: 100%}
.full-height, .fit-parent {height: 100%}
.flexable {display: flex}
.flexable.wrap {flex-flow: wrap}
.flexable.row-mode {flex-direction: column}
.flexable.column-mode {flex-direction: row}
.auto-grow {flex-grow: 1}
.flexable.v-top {align-items: flex-start}
.flexable.v-center {align-items: center}
.flexable.v-bottom {align-items: flex-end}
.flexable.h-center {justify-items: center; justify-content: center}
.flexable.h-right {justify-items: flex-end; justify-content: flex-end}
.flexable.space-between {justify-content: space-between}
.both-center {display: flex; align-items: center; justify-items: center; align-content: center; justify-content: center;text-align: center}
.auto-grow {flex-grow: 1}
/*.bordered { border: 1px solid #666;}*/
.srf-items, .srf-items li {list-style: none; margin: 0; padding: 0;/* width: 300px;*/}
.srf-items li a {padding: 10px; display: block}
.plain, .plain:hover {text-decoration: none;}
.pad-10 {padding: 10px;}
.cai-method {width: 100%;align-items: flex-start; border: 1px solid #666; padding: 10px; margin-top: 5px;}
.signature {font-family: "Source Code Pro", monospace; font-size: 14px;}
.description {font-size: small; margin: 5px 0 0}
.method-holder:first-child {margin-top: 0}
#dlg-method-list {min-width: 900px; max-width: 1200px; overflow-x: hidden}
#dlg-method-list:first-child {margin-top: 0;}

.scrollable {overflow: auto;}
.scrollable::-webkit-scrollbar { width: 5px; height: 5px; opacity: 0 }
.scrollable:hover::-webkit-scrollbar {opacity: 1 }
.scrollable:hover::-webkit-scrollbar-track { border-radius: 5px; background: #f0f0f0; }
.scrollable:hover::-webkit-scrollbar-thumb { border-radius: 5px; background: #ccc; }

.scroll-wrapper {overflow: auto; /*max-height: 400px;*/}

.inv-table {margin: 10px auto; width:100%}
.inv-table td {vertical-align: top; padding: 5px 10px;}
/*.err-msg {color: #be2019;}*/
.inv-table td.inv-param-name {min-width: 180px;}
.param-name {height: 34px; line-height:34px; display: inline-block; }
input[type=text].param-field, textarea.param-field {
    outline: none; border-style: solid; padding: 3px 10px; width: 100%; border-width: 1px;
}
.scroll-wrapper::-webkit-scrollbar {     width: 5px; height: 5px; }
.scroll-wrapper::-webkit-scrollbar-track { border-radius: 5px; }
.scroll-wrapper::-webkit-scrollbar-thumb { border-radius: 5px; }
.scroll-wrapper::-webkit-scrollbar-corner {background: #3f3f3f;}
.scroll-wrapper::-webkit-scrollbar-thumb:hover { border-radius: 5px; }
.scroll-wrapper::-webkit-scrollbar-thumb:active { border-radius: 5px; }
pre {/*overflow: visible; */padding:10px; margin:0; line-height: 180% /*font-size: smaller*/}
.method-arrow { color: #999 }
.inv-param-field { width: 100% }
.inv-param-field .param-field {width: 100%}
#theme-selector {z-index: 999}
#theme-list {width: 360px}
#theme-list, #theme-list li.theme-item {list-style: none; margin: 0; padding: 0}
.theme-item a {display: block; padding: 10px;}
.release-notes, .release-notes li {margin:0; padding: 0}

.btn.btn-plain {}
.both-center {display: flex; align-items: center; justify-items: center; align-content: center; justify-content: center;text-align: center}
.icon-holder {
    width: 20px;height:20px; border-radius: 50%; border: 1px solid #ccc; text-decoration: none;
    font-size: 75%; display: flex;align-items: center; justify-items: center; align-content: center;
    justify-content: center;
}
.icon-holder:hover {background-color: #f1f2f3}
.rotate-up {
    transition: transform .3s;
}
.rotate-up.done {
    transform: rotate(90deg);
}
@keyframes rotate-up {
    to {transform: rotate(90deg)}
}

.srf-enter-active, .srf-leave-active {
    transition: all 0.5s ease;
}
.srf-enter-from, .srf-leave-to {
    opacity: 0;
    transform: translateY(-100%);
}